<template>
  <div class="">
    <table>
      <tr>
        <th>姓名</th>
        <th>编号</th>
        <th>年龄</th>
        <th>操作</th>
      </tr>
      <tr v-for="item in users" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td><span @click="gotodetail(item)">详情</span></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { id: 11, name: "张三", age: 10 },
        { id: 22, name: "李四", age: 20 },
        { id: 33, name: "王五", age: 30 },
        { id: 44, name: "赵六", age: 40 },
      ],
    };
  },
  mounted() {},
  methods: {
    gotodetail(item) {
      this.$router.push({ path: "/detail", query: { obj: item } });
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
